<template>
	<div>
		<h2 class="title">
			大连商品交易所场外业务日报
	  	</h2>
		<div>
			<table border="1px" cellspacing="0" class="table full-width first-table">
				<tr class="table-title">
					<td colspan="6">
						<strong>{{parseInt(todayDate.substring(5, 7))}}月{{parseInt(todayDate.substring(8, 10))}}日交易情况</strong>
					</td>
				</tr>
				<tr align="center">
					<td rowspan="2">
						<strong>业务</strong>
					</td>
					<td colspan="3" class="table-left">
						<strong>今日交易量</strong>
					</td>
					<td colspan="2" class="table-right">
						<strong>今年累计交易量</strong>
					</td>
				</tr>
				<tr align="center">
					<td class="table-left">
						<strong>成交量<br/>（万吨）</strong>
					</td>
					<td class="table-left">
						<strong>成交额<br/>（亿元）</strong>
					</td>
					<td class="table-left">
						<strong>环比</strong>
					</td>
					<td class="table-right">
						<strong>成交量<br/>（万吨）</strong>
					</td>
					<td class="table-right">
						<strong>成交额<br/>（亿元）</strong>
					</td>
				</tr>
				
				<tr align="center">
					<td><strong>标准仓单</strong></td>
					<td class="table-left">{{reportData.daily_summary.wbill.volume}}</td>
					<td class="table-left">{{reportData.daily_summary.wbill.turnover}}</td>
					<td class="table-left" v-if="reportData.daily_summary.wbill.turnover_rate == null">-</td>
					<td class="table-left" v-if="reportData.daily_summary.wbill.turnover_rate != null" :class="reportData.daily_summary.wbill.turnover_rate >= 0 ? 'red': 'green'">{{reportData.daily_summary.wbill.turnover_rate + '%'}}</td>
					<td class="table-right">{{reportData.daily_summary.wbill.year_volume}}</td>
					<td class="table-right">{{reportData.daily_summary.wbill.year_turnover}}</td>
				</tr>
				<tr align="center">
					<td><strong>基差交易</strong></td>
					<td class="table-left">{{reportData.daily_summary.basis.volume}}</td>
					<td class="table-left">{{reportData.daily_summary.basis.turnover}}</td>
					<td class="table-left" v-if="reportData.daily_summary.basis.turnover_rate == null">-</td>
					<td class="table-left" v-if="reportData.daily_summary.basis.turnover_rate != null" :class="reportData.daily_summary.basis.turnover_rate >= 0 ? 'red': 'green'">{{reportData.daily_summary.basis.turnover_rate + '%'}}</td>
					<td class="table-right">{{reportData.daily_summary.basis.year_volume}}</td>
					<td class="table-right">{{reportData.daily_summary.basis.year_turnover}}</td>
				</tr>
				<tr align="center">
					<td><strong>非标仓单</strong></td>
					<td class="table-left">{{reportData.daily_summary.nonwbill.volume}}</td>
					<td class="table-left">{{reportData.daily_summary.nonwbill.turnover}}</td>
					<td class="table-left" v-if="reportData.daily_summary.nonwbill.turnover_rate == null">-</td>
					<td class="table-left" v-if="reportData.daily_summary.nonwbill.turnover_rate != null" :class="reportData.daily_summary.nonwbill.turnover_rate >= 0 ? 'red': 'green'">{{reportData.daily_summary.nonwbill.turnover_rate + '%'}}</td>
					<td class="table-right">{{reportData.daily_summary.nonwbill.year_volume}}</td>
					<td class="table-right">{{reportData.daily_summary.nonwbill.year_turnover}}</td>
				</tr>
				<tr align="center">
					<td><strong>合计</strong></td>
					<td class="table-left">{{reportData.daily_summary.summary.volume}}</td>
					<td class="table-left">{{reportData.daily_summary.summary.turnover}}</td>
					<td class="table-left" v-if="reportData.daily_summary.summary.turnover_rate == null">-</td>
					<td class="table-left" v-if="reportData.daily_summary.summary.turnover_rate != null" :class="reportData.daily_summary.summary.turnover_rate >= 0 ? 'red': 'green'">{{reportData.daily_summary.summary.turnover_rate + '%'}}</td>
					<td class="table-right">{{reportData.daily_summary.summary.year_volume}}</td>
					<td class="table-right">{{reportData.daily_summary.summary.year_turnover}}</td>
				</tr>
				<tr class="table-title">
					<td colspan="6">
						<strong>{{parseInt(todayDate.substring(5, 7))}}月{{parseInt(todayDate.substring(8, 10))}}日成交品种</strong>
					</td>
				</tr>
				<tr align="center">
					<td>
						<strong>业务</strong>
					</td>
					<td colspan="3" class="table-left">
						<strong>今日成交品种</strong>
					</td>
					<td class="table-right">
						<strong>成交量<br/>（万吨）</strong>
					</td>
					<td class="table-right">
						<strong>成交额<br/>（亿元）</strong>
					</td>
				</tr>
				<tr align="center" v-for="(data, index) in reportData.daily_detail.data">
					<td :rowspan="reportData.daily_detail.wbill_num" v-if="reportData.daily_detail.wbill_num !=0 && index == 0"><strong>标准仓单</strong></td>
					<td :rowspan="reportData.daily_detail.basis_num" v-if="reportData.daily_detail.basis_num !=0 && index == reportData.daily_detail.wbill_num"><strong>基差交易</strong></td>
					<td colspan="2" class="table-left">{{data[1]}}</td>
					<td class="table-left">{{data[2]+'笔'}}</td>
					<td class="table-right">{{data[3]}}</td>
					<td class="table-right">{{data[4]}}</td>
				</tr>
			</table>
			<p>注：环比增长<span class="red">红色字</span>标注，下降<span class="green">绿色字</span>标注并加“-”号，环比比较成交额。品种按照成交笔数从高至低顺序排列。</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "DailySummary",
		props: {
			todayDate: {
				type: String,
				default () {
					return "";
				},
			},
			searchDate: {
				type: String,
				default () {
					return "";
				},
			},
			reportData: {
				type: Object,
				default () {
					return {};
				},
			}
		},
		computed: {
			fromIndexDate() {
				return this.dateInfo; // 因为传递过来是个引用类型的函数
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title {
	margin: 0;
	margin-top: 20px;
	text-align: center;
	margin-bottom: 20px;
	}
	.table td {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.full-width {
		width: 100%;
	}

	.table-title {
		text-align: center;
	}

	.table-left {
		background-color: #dee6f1;
	}

	.table-right {
		background-color: #ecf1e0;
	}

	.first-table {
		border-bottom-width: 0px;
	}

	.red{
		color: #ea3323;
	}

	.green{
		color: #4ead5b;
	}
	
</style>
